<template>
  <div>
    <el-row style="margin-bottom:10px">
      <el-col :span="24" >
        <h4 style="margin:0">
          <span>意见反馈</span>
        </h4>
        <div style="font-size:12px">平台自动回复：您的举报信息已经收到了，很抱歉给您带来不好的体验，在您的监督下牙记才会越做越好。</div>
      </el-col>
      
    </el-row>
   
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
     <el-table-column prop="ID" label="序号" width="60">
        <template slot-scope="scope">{{scope.$index+1}}</template>
     </el-table-column>
     <el-table-column prop="userInfo.userNick" label="ID" width="150"> </el-table-column>
      <el-table-column prop="date" label="时间" width="150">
         <template slot-scope="scope">
          {{timeFun(scope.row.createtime)}}
        </template>
      </el-table-column>      
      <el-table-column prop="content" label="内容">
        <template slot-scope="scope">
          <div class="contentbox">
            <div>{{scope.row.content}}</div>
            <div>
              <img v-for="(item,index) in scope.row.images" :key="index" @click="showImage(item)" :src="item" style="margin-right: 5px; width: 70px; height: 80px;"/>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="userInfo.userPhone" label="联系方式" width="180"></el-table-column>
    </el-table>
    
    <el-dialog :visible.sync="imgstuts">
      <img width="100%" :src="titleImgurl" alt="">
    </el-dialog>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
   
  </div>
</template>

<script>
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'
  export default {
    data() {
      return {
        editId:0,
        imgstuts:false,
        titleImgurl:'',
        textarea:'',
        checkleng:'',
        total:0,
        pageIndex:1,
        pageSize:10,
        currentPage4:1,
        tableData: []
      }
    },
    created(){
      this.getlist()
    },
    
    methods: {

       getlist() {
        const obj = {
          "pageIndex":this.pageIndex,
          "pageSize":this.pageSize
        };
       
        Http.getMsglist(obj)
        .then( res => {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
         
        })
        .catch( error => {
          
        })
      },

      //图片放大
      showImage(row){
        
        this.titleImgurl = row
        this.imgstuts = true
      },

       //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getlist()
        
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.getlist()
        
      },
      timeFun(val) {
        return getTime(val)
      },
      
      //选择 推荐
      handleSelectionChange(val) {
        this.checkleng = val
      },
    }
  }
</script>
<style  scoped>
.box{
  border-bottom:1px solid red;
}
.test{
  border:1px solid #ccc;
}
.drag-item{
  width: 200px;
  height: 50px;
  line-height: 50px;
  margin: auto;
  position: relative;
  
  background: #ddd;
  margin:20px 5px;
}
.ghostClass{
    opacity: 1;
}
.bottom{
  width: 200px;
  height: 50px;
  position: relative;
  background: blue;
  top:2px;
  left: 2px;
  transition: all .5s linear;
}
.contentbox{
  display: flex;
}
</style>
